@import "./mixin.scss";
@import "./color.scss";

// 打印面板
.print {
  position: absolute;
  height: calc(100vh - 85px);
  overflow: auto;
  // height: 100%;
  width: 100%;
  padding-right: 348px;

  // overflow: auto;
  .print-wrapper {
    // A4尺寸
    background: $outer-bgc;
    // padding: ;
    @include flexBox;
    padding: 30px 0px 200px 30px;
    // margin-right: 350px;
    margin: 0 auto;
    // min-height: 1000px;
    // min-width: 100%;
  }

  .print-box-only-read {
    // padding: 30px;
    background-color: #fff;
  }

  .print-box {
    // padding: 30px;
    background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.05) 1px,
        transparent 0
      ),
      linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 0);
    background-size: 16px 16px;
    background-color: #fff;
  }

  .print-setting {
    border-left: 20px solid $outer-bgc;
    width: 375px;
    // background-color: pink;
    position: fixed;
    right: 0;
    // top: 81px;
    top: 0;
    // height: calc(100vh - 85px);
    background-color: $editor-bgc;
    overflow: auto;
    padding: 10px 0 100px 15px;

    .setting-btn-group {
      position: inherit;
      bottom: 0;
      // left: 0;
      right: 0;
      width: 375px;
      height: 70px;
      background-color: #fff;
      // border: 1prx solid #464646;
      border-left: 20px solid $outer-bgc;
      @include flexBox($jc: space-around);

      .btn {
        padding: 8px 20px;
        background-color: #409eff;
        color: #fff;
        border-radius: 4px;
        font-size: 15px;
      }

      .cancel {
        background-color: #fff;
        color: rgb(58, 58, 58);
        border: 1px solid #e4e4e4;
      }
    }
  }
}

@media print {
  @page {
    margin: 0;
    padding: 0;
  }

  body {
    padding: 0;
  }
}
